<template>
  <div>
    <div class="export">
      <a href="javascript:void(0)" target="_blank"><el-button type="primary" class="exportBtn" @click="exportExcelHandler">导出</el-button></a>
    </div>
    <el-table :data="myTableData" border>
      <el-table-column :label="item.label" v-for="(item,index) in myTable" :key="index">
        <template slot-scope="scope">
          <span :title="scope.row[item.name]">{{ scope.row[item.name] }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination layout="total, prev, pager, next, jumper"
                     @current-change="handleCurrentChange"
                     :current-page="page.pageNum"
                     :page-size="page.pageSize"
                     :total="page.total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import { mapState, mapActions } from 'vuex'
  export default {
    data () {
      return {}
    },
    props: ['myTable', 'myTableData', 'exportUrl', 'exportParam'],
    computed: {
      ...mapState('moduleItem', [
        'table',
        'tableData',
        'tableDataTotal',
        'page'
      ])
    },
    methods: {
      ...mapActions('moduleItem', ['setPage', 'setTableData', 'setTableDataTotal', 'setTable']),
      handleCurrentChange (val) {
        let that = this
        let tableData = []
        let arrlen = val * that.page.pageSize <= that.tableDataTotal.length ? that.page.pageSize : that.tableDataTotal.length - that.page.pageSize * (val - 1)
        for (let i = 0; i < arrlen; i++) {
          let temp = i + that.page.pageSize * (val - 1)
          tableData.push(that.tableDataTotal[temp])
        }
        that.setTableData(tableData)
        that.setPage({pageNum: val, pageSize: 10, total: that.tableDataTotal.length})
      },
      exportExcelHandler () { // 导出excel
        let url = this.exportUrl
        let params = this.exportParam
        this.$exportExcel(url, params)
      }
    }
  }
</script>
